<template>
  <!-- 推荐 -->
  <div class="recommend-page">
    <!-- 轮播图 -->
    <div class="swipe-container">
      <van-swipe :autoplay="3000" lazy-render indicator-color="white">
        <van-swipe-item
          v-for="image in images"
          :key="image"
          @click="$router.push(`/cartCategroy/${image.id}`)"
          ><img :src="image.imgurl" /> </van-swipe-item
      ></van-swipe>
    </div>

    <!-- 十个列表 -->
    <div class="recommend-nav">
      <ul class="recommend-list">
        <li
          class="recommend-item"
          v-for="item in RecommendList"
          :key="item.index"
        >
          <img :src="item.imgurl" alt="" />
        </li>
      </ul>
    </div>

    <!-- 加载状态 -->
    <van-loading type="spinner" v-if="loadStatus" />

    <div class="recommend-content" v-else>
      <div class="recommend-common">
        <!-- 左侧图片 -->
        <div class="recommend-common-left">
          <router-link to="/cartCategroy/9">
            <img src="@/assets/images/home/mi11-ultra.jpg" alt="" />
          </router-link>
        </div>
        <!-- 右侧图片 -->
        <div class="recommend-common-right">
          <img src="@/assets/images/home/mi-shouhuan6.jpg" alt="" />
          <img src="@/assets/images/home/mi-tvs.jpg" alt="" />
        </div>
      </div>

      <!-- 热销爆款 -->
      <div class="recommend-phone">
        <div class="recommend-hot recommend-hot-phone">
          <router-link to="/cartCategroy/7">
            <img src="@/assets/images/home/mi11-youth.jpg" alt="" />
          </router-link>
        </div>

        <ul class="recommend-phone-list">
          <li
            class="recommend-phone-item"
            v-for="item in phonelist.slice(2, 8)"
            :key="item.id"
          >
            <router-link :to="'/cartCategroy/' + item.id">
              <!-- 图片 -->
              <div class="phone-item-top">
                <van-image
                  :src="item.image_url"
                  fit="contain"
                  height="33.6vw"
                ></van-image>
              </div>

              <!-- 机型、价格 -->
              <div class="phone-item-bottom">
                <p class="text-item phone-name">{{ item.zh_name }}</p>
                <p class="text-item phone-description">
                  {{ item.description }}
                </p>
                <p class="text-item phone-price">
                  <span class="phone-price-text"
                    >￥{{ item.price - item.discount }}</span
                  >
                  <del class="phone-discount">{{
                    item.discount > 0 ? "￥" + item.discount : ""
                  }}</del>
                </p>
                <p class="p-buy"><button class="btn-buy">立即购买</button></p>
              </div>
            </router-link>
          </li>
        </ul>
        <hr />
        <div class="link-more-box">
          <router-link to="/">更多小米手机产品 ></router-link>
        </div>
      </div>

      <div class="recommend-tvs">
        <div class="recommend-hot recommend-hot-phone">
          <router-link to="/cartCategroy/12">
            <img src="../../../assets/images/home/mi-tv-ea-69.jpg" alt="" />
          </router-link>
        </div>

        <div class="link-more-box">
          <router-link to="/">更多小米电视产品 ></router-link>
        </div>
      </div>

      <div class="recommend-tvs">
        <div class="recommend-hot recommend-hot-phone">
          <router-link to="/cartCategroy/80">
            <img
              src="../../../assets/images/home/mi-redmi-book-16.jpg"
              alt=""
            />
          </router-link>
        </div>

        <div class="link-more-box">
          <router-link to="/">更多小米笔记本产品 ></router-link>
        </div>
      </div>

      <div class="recommend-tvs">
        <div class="recommend-hot recommend-hot-phone">
          <router-link to="/cartCategroy/84">
            <img
              src="../../../assets/images/home/mi-water-clean-600.jpg"
              alt=""
            />
          </router-link>
        </div>

        <div class="link-more-box">
          <router-link to="/">更多米家家电产品 ></router-link>
        </div>
      </div>

      <div class="recommend-intelligences">
        <div class="recommend-hot recommend-hot-phone">
          <router-link to="/">
            <img src="../../../assets/images/home/mi-better.jpg" alt="" />
          </router-link>
        </div>

        <div class="link-more-box">
          <router-link to="/">更多米家智能产品 ></router-link>
        </div>
      </div>

      <div class="recommend-category">
        <router-link to="/" v-for="item in BottomList" :key="item.index">
          <img :src="item.imgurl" alt />
        </router-link>
      </div>

      <div class="recommend-refresh">
        <router-link to="/">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4c4a11536a720ee0f1b516e53e4d868.jpg?f=webp&w=1080&h=420&bg=873FFA"
            alt=""
          />
        </router-link>
        <div class="link-more-box">
          <router-link to="/">了解小米 ></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllTopCategories } from "@/api/category";
import { onMounted, ref } from "@vue/runtime-core";
export default {
  setup() {
    /* 
    
      
      ,
     */
    const images = [
      {
        id: 7,
        imgurl: require("@/assets/images/home/swipe-mi11.jpg"),
      },
      {
        id: 96,
        imgurl: require("@/assets/images/home/swipe-mi12.jpg"),
      },
      {
        id: 7,
        imgurl: require("@/assets/images/home/swipe-mishen.jpg"),
      },
    ];

    const RecommendList = [
      {
        imgurl: require("@/assets/images/home/mi-jinshop.png"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-zhongchou.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-phone.png"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-refresh.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-shangxin.jpg"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-intell.png"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-notebook.png"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-dianshi.png"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-xiyiji.jpg"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/mi-fen-card.png"),
        url: "",
      },
    ];

    const BottomList = [
      {
        imgurl: require("@/assets/images/home/recommend-category/work.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/recommend-category/household.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/recommend-category/pack.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/recommend-category/ear-phone.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/recommend-category/10000.webp"),
        url: "",
      },
      {
        imgurl: require("@/assets/images/home/recommend-category/meixue.webp"),
        url: "",
      },
    ];

    const loadStatus = ref(false);

    const phonelist = ref([]); // 手机列表数据
    onMounted(async () => {
      loadStatus.value = true;
      const data = await getAllTopCategories();
      // console.log(data);
      phonelist.value = data.data[0].products;
      loadStatus.value = false;
    });
    // console.log(phonelist);

    return { images, RecommendList, phonelist, BottomList, loadStatus };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
div.recommend-page {
  width: 375px;
  overflow: hidden;
  padding-bottom: 50px;
  .swipe-container {
    .van-swipe {
      width: 100%;
      height: 186px;
      .van-swipe-item {
        a {
          display: block;
        }
        img {
          width: 100%;
          height: 186px;
        }
      }
    }
  }

  .recommend-nav {
    margin-top: -2px;

    .recommend-list {
      display: flex;
      flex-wrap: wrap;
      font-size: 0;
    }

    .recommend-item img {
      width: 75px;
      height: 75px;
    }
  }

  .recommend-content {
    .recommend-common {
      padding-top: 8px;
      display: flex;
      .recommend-common-left {
        width: 50%;
        img {
          width: 187.5px;
          height: 266px;
        }
      }
      .recommend-common-right {
        width: 187.5px;
        height: 266px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img {
          width: 187.5px;
          height: 132px;
        }
      }
    }
    .recommend-phone {
      .recommend-hot-phone {
        a {
          display: block;
          img {
            width: 375px;
            height: 240px;
          }
        }
      }

      .recommend-phone-list {
        width: 375px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        .recommend-phone-item {
          width: 187.5px;
          height: 260px;
          padding: 5px;
          box-sizing: border-box;
          border: 1px solid #f5f5f5;
          .phone-item-top {
            display: flex;
            justify-content: center;
            .van-image {
              overflow: hidden;
            }
          }

          .phone-item-bottom {
            padding-top: 12px;
            p {
              margin: 0;
            }
            p.text-item {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 18px;
              line-height: 18px;
              text-align: center;
            }
            p.phone-name {
              color: black;
              font-weight: 500;
              font-size: 12px;
            }
            p.phone-description {
              font-weight: 300;
              font-size: 12px;
            }
            p.phone-price {
              span.phone-price-text {
                color: rgb(234, 98, 91);
                font-size: 12px;
              }
            }
            .p-buy {
              text-align: center;
            }
            button.btn-buy {
              width: 100px;
              height: 30px;
              background-color: rgb(234, 98, 91);
              border-radius: 2px;
              border: none;
              color: #fff;
              font-size: 12px;
            }
          }
        }
      }
    }
    .recommend-intelligences {
      .recommend-hot {
        a {
          img {
            height: 144px;
          }
        }
      }
    }
    .recommend-category {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      a {
        display: block;
        padding-bottom: 2px;
        height: 250px;
        img {
          width: 186.5px;
          height: 250px;
        }
      }
    }
    .recommend-refresh {
      padding-top: 5px;
      a {
        display: block;
        img {
          width: 100%;
          height: 145px;
        }
      }
    }

    /* 
    公共属性
    */
    a {
      text-decoration: none;
      color: #666;
    }
    .recommend-hot {
      background-color: #f5f5f5;
      padding: 5px 0;
      a {
        display: block;
        img {
          width: 375px;
          height: 240px;
        }
      }
    }
    .link-more-box {
      width: 100%;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 16px;
      background-color: white;
      a {
        display: block;
      }
    }
  }
}
</style>